<template>
<div>
     <h2 class="header">试卷列表</h2>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed prop="_id" label="id" width="300">
      </el-table-column>
      <el-table-column prop="username" label="姓名" >
      </el-table-column>
      <el-table-column prop="score" label="总分" >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button 
          @click="$router.push(`/answer/edit/${scope.row._id}`)"
           type="text" size="small"
            >批改</el-button
          >
          <el-button
          @click="remove(scope.row)" type="text" size="small">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
</div>
</template>

<script>
export default {
  props:{
   id: {
     type: String
   }
  },
  data() {
    return {
      model: {
      
      },
     tableData: []
    }
  },
methods: {
     async fetchCats() {
    const res = await this.$http.get('/student/answer')
    this.tableData= res.data
     },
     async remove(row) {
      this.$confirm(`确定要删除"${row.username}"的答卷吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then( async () => {
          const res = await this.$http.delete(`/student/answer/${row._id}`)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.fetchCats()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     }
  },
  created() {
 this.fetchCats()
  },
   data() {
    return {
      tableData: [
        
      ],
    };
    model:{

    }
  },
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 400px;
    height: 180px;
    line-height: 180px;
    text-align: center;
  }
  .avatar {
    width: 400px;
    height: 180px;
    display: block;
  }
.header {
  text-align: center;
}
.date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.duration .el-input {
  position: relative;
width: 260px;
}
.duration button {
  position: absolute;
  top: 2px;
  left: 160px;
  width: 100px;
  height: 38px;
  outline: none;
  border: 0;
  border-radius: 2px;
  background-color: #F5F7FA;
}

</style>